<template>
	<view class="bottom-bar-player" :class="{ 'bottom-safe-area-fixed': !devEnv }" @tap.stop.prevent="tapPlayerHandler" v-if="playInfo.payload">
		<!-- → bottombar播放器 -->
		<view class="bottom-bar-player-spacing">
			<!-- 歌曲封面 -->
			<view class="bottom-bar-player__poster">
				<image class="bottom-bar-player__poster-image" :src="`${playInfo.picUrl}?param=100y100`" mode="aspectFit" />
			</view>
			<view class="bottom-bar-player__main">
				<view class="bottom-bar-player__main-info text-ellipsis-single">
					<!-- 标题 -->
					<text class="bottom-bar-player__main-title text-ellipsis-single">
						{{ playInfo.title }}
					</text>
					<!-- 作者 -->
					<text class="bottom-bar-player__main-artist text-ellipsis-single">&nbsp;-&nbsp;{{ playInfo.artist }}</text>
				</view>
				<!-- 按钮栏 -->
				<view class="bottom-bar-player__main-action">
					<view v-if="playerStatus.paused" @tap.stop.prevent="playSong(true)" class="bottom-bar-player__main-action-play" />
					<view v-else @tap.stop.prevent="playSong(false)" class="bottom-bar-player__main-action-pause" />
					<!-- 播放队列按钮 -->
					<view class="bottom-bar-player__main-action-queue" @tap.stop.prevent="toQueue" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ThePlayerBottomBar',
	data() {
		return {};
	},
	beforeCreate() {
		console.log(this.$store);
	},
	computed: {
		//对底部安全区域做校验
		devEnv() {
			return uni.getSystemInfoSync().platform === 'devtools';
		},
		//获取播放数据
		playInfo() {
			return this.$store.state.player.playerInfo;
		},
		playerStatus() {
			return this.$store.state.player.playerStatus;
		}
	},
	methods: {
		playSong(status) {
			!status ? this.$store.dispatch('player/setPlayerPause') : this.$store.dispatch('player/setPlayerPlay');
		},

		tapPlayerHandler() {
			uni.navigateTo({
				url: '/pages/player/player?type=poster'
			});
		},
		toQueue() {
			uni.navigateTo({
				url: '/pages/player/player?type=queue'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bottom-safe-area-fixed {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.bottom-bar-player {
	width: 100%;
	// 播放器高度
	height: var(--player-height-custom);
	position: fixed;
	z-index: 997;
	left: 0;
	right: 0;
	bottom: var(--window-bottom);
	background: var(--theme-background-color-card);
	/* #ifndef H5 */
	background: var(--theme-filter-color);
	backdrop-filter: saturate(200%) blur(20px);
	/* #endif */

	.bottom-bar-player-spacing {
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		// 封面
		.bottom-bar-player__poster {
			flex-shrink: 0;
			width: 83.3rpx;
			height: 83.3rpx;
			border-radius: 50%;
			margin-top: -16.5rpx;
			background: url('@/static/crc.png') center center no-repeat;
			background-size: 100%;
			position: relative;

			.bottom-bar-player__poster-image {
				width: 62%;
				height: 62%;
				top: 50%;
				left: 50%;
				position: absolute;
				border-radius: 50%;
				transform: translate(-50%, -50%);
			}
		}

		// 歌曲信息
		.bottom-bar-player__main {
			height: 100%;
			width: calc(100% - 83.3rpx - 23rpx);
			margin-left: 23rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// 歌曲信息
			.bottom-bar-player__main-info {
				display: flex;
				align-items: center;
				width: calc(100% - 138rpx);
				height: 100%;
				box-sizing: border-box;
				padding-right: 30rpx;
				white-space: nowrap;
				.bottom-bar-player__main-title,
				.bottom-bar-player__main-artist {
					white-space: nowrap;
				}
				.bottom-bar-player__main-title {
					font-size: 24rpx;
					color: var(--theme-text-title-color);
				}
				.bottom-bar-player__main-artist {
					font-size: 19.2rpx;
					color: var(--theme-text-sub-color);
				}
			}
			// 按钮栏
			.bottom-bar-player__main-action {
				width: 138rpx;
				height: 100%;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-end;
				// 播放按钮
				.bottom-bar-player__main-action-play,
				.bottom-bar-player__main-action-pause,
				.bottom-bar-player__main-action-queue {
					background-color: var(--theme-text-title-color);
					mask-size: 100%;
					mask-repeat: no-repeat;
					mask-position: center;
				}
				.bottom-bar-player__main-action-play {
					width: 52.5rpx;
					height: 52.5rpx;
					mask-image: url('@/static/c4n.png');
				}
				.bottom-bar-player__main-action-pause {
					width: 52.5rpx;
					height: 52.5rpx;
					mask-image: url('@/static/ew6.png');
				}
				.bottom-bar-player__main-action-queue {
					width: 35.9rpx;
					height: 35.9rpx;
					mask-image: url('@/static/eys.png');
					margin-left: 46.15rpx;
				}
			}
		}
	}
}
</style>
